<template>
    <view>
        <view class="main">
            <view class="form noLabel">
                <uni-forms :modelValue="ruleForm" :rules="rules" ref="ruleForm" label-width="0" validateTrigger="blur">
                    <uni-forms-item name="time">
                        <view class="li">
                            <view class="fl"><text class="red">*</text>{{$lang('设置排产日期')}}：</view>
                            <view class="fr">
                                <uni-datetime-picker type="date" :clear-icon="false" v-model="ruleForm.time" :placeholder="$lang('年/月/日')"  />
                            </view>
                        </view>
                    </uni-forms-item>
                </uni-forms>
            </view>
        </view>
        <view class="footerFen"></view>
        <view class="footer">
            <view class="top">
                <view class="fl" @click="$common.back()">{{$lang('取消')}}</view>
                <view class="fr" @click="submit">{{$lang('确定')}}</view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        planGeneratorTime
    } from '../../api/api'
    export default {
        data() {
            return {
                ruleForm:{
                    time:''
                },
                rules:{
                    time: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请设置排产日期') }
                        ]
                    },
                },
            }
        },
        onLoad(options) {
            this.ruleForm.id = options.id;
            uni.setNavigationBarTitle({
                title: this.$lang('计划排产时间')
            });
        },
        methods: {
            submit(){
                this.$refs.ruleForm.validate().then(valid => {
                    planGeneratorTime(this.ruleForm).then(res => {
                        if(res.code == 1){
                            uni.showToast({
                                title:this.$lang('设置成功'),
                                icon:'none'
                            });
                            setTimeout(() => {
                                this.$common.back();
                                uni.$emit('returnData',1);
                            },500)
                        } else{
                            uni.showToast({
                                title:res.msg,
                                icon:'none'
                            })
                        }
                    })
                }).catch(err => {

                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .main{
        padding: 60rpx 24rpx 40rpx 24rpx;
        .form{
            .radio{
                /deep/ .checklist-box{
                    .checklist-content{
                        .checklist-text{
                            color: #222;
                            font-size: 32rpx;
                        }
                    }
                    &.is-checked{
                        .radio__inner{
                            border-color: #365aa6;
                            .radio__inner-icon{
                                background-color: #365aa6;
                            }
                        }
                        .checklist-content{
                            .checklist-text{
                                color: #365aa6;
                            }
                        }
                    }
                }
            }
            .li{
                display: flex;
                flex-direction: column;
                .fl{
                    font-size: 32rpx;
                    color: #222;
                }
                .fr{
                    display: flex;
                    align-items: center;
                    position: relative;
                    height: 90rpx;
                    border: 1px solid #747474;
                    padding: 0 33rpx;
                    border-radius: 10rpx;
                    margin-top: 15rpx;
                    input{
                        font-size: 32rpx;
                        color: #222;
                        padding-right: 15rpx;
                        width: 100%;
                    }
                    image{
                        width: 60rpx;
                        height: 60rpx;
                    }
                    /deep/ .uni-date{
                        .uni-date-picker__container{
                            position: absolute;
                            left: -50%;
                            .uni-popper__arrow{
                                left: 50%;
                            }
                        }
                        .uni-date-x--border{
                            /*border-color: #757575;*/
                            border:none;
                            border-radius: 8rpx;
                            .uni-date-x{
                                border-radius: 8rpx;
                                font-size: 32rpx;
                                .uni-icons{
                                    font-size: 40rpx !important;
                                    color: #365aa6 !important;
                                }
                                .uni-date__x-input{
                                    height: 90rpx;
                                    line-height: 90rpx;
                                    font-size: 32rpx;
                                    margin-left: 12rpx;
                                }
                            }
                        }
                    }
                }
            }
            .tableBox{
                .fl{
                    font-size: 32rpx;
                    color: #222;
                }
                .fr{
                    margin-top: 15rpx;
                }
            }
            .info{
                padding-top: 50rpx;
                .h1{
                    display: flex;
                    align-items: center;
                    font-size: 32rpx;
                    color: #222;
                    &:before{
                        content: '';
                        width: 8rpx;
                        height: 30rpx;
                        border-radius: 8rpx;
                        background: #365aa6;
                        margin-right: 20rpx;
                    }
                }
                .list{
                    padding-left: 25rpx;
                    font-size: 28rpx;
                    line-height: 48rpx;
                    color: #222;
                    margin-top: 18rpx;
                }
            }
        }
    }
    .footerFen{
        height: 179rpx;
    }
    .footer{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 24rpx 24rpx 45rpx 24rpx;
        .top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .fl{
                width: 280rpx;
                height: 90rpx;
                border-radius: 90rpx;
                text-align: center;
                line-height: 90rpx;
                font-size: 36rpx;
                color: #555;
                border: 1px solid #c9c9c9;
            }
            .fr{
                width: 400rpx;
                height: 90rpx;
                border-radius: 90rpx;
                text-align: center;
                line-height: 90rpx;
                background: #365aa6;
                color: #fff;
                font-size: 36rpx;
            }
        }
    }
</style>
